<template>
  <div class="teHui">
    <!-- {{spikeList}} -->
    <!-- 上半部 -->
    <div class="teHuiLan1">
      <!-- 左侧 -->
      <div class="teHuiLan1Fisrt">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in tejiaData" :key="index">
            <div class="daoJiShi"  @click="goDetail(item)">
              <div>限时特惠</div>
              <div class="backtimer">
                <count-down
                  :currentTime="1538983555"
                  :startTime="item.startTime"
                  :endTime="item.endTime"
                  :dayTxt="'天'"
                  :hourTxt="':'"
                  :minutesTxt="':'"
                  :secondsTxt="''"
                ></count-down>
              </div>
            </div>
            <div class="content" @click="goDetail(item)">
              <div class="bgcImg" :style="{backgroundImage:'url(' + item.imgUrl + ')'}   ">
                <span class="num">仅限{{item.num}}个</span>
                <span class="startAdress">{{item.startAdress}}</span>
              </div>
              <div class="des">{{item.title}}</div>
              <div class="price">
                <span>￥{{item.price}}起</span>
                <span>￥{{item.yPrice}}起</span>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <!-- 右侧 -->
      <div class="teHuiLan1Second">
        <ul>
          <li v-for="(item,index) in rightData" :key="index">
            <div class="title">
              <span>{{item.title}}</span>
              <span>></span>
            </div>
            <div class="content">
              <p>{{item.content}}</p>
              <span>
                ￥
                <strong class="strongSize">{{item.price}}</strong>起
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 下半部 -->
    <div class="teHuiLan2">
      <ul>
        <li v-for="(item,index) in imgsData" :key="index">
          <div :style=" {backgroundImage:'url('+ item.url +')'} ">
            <p>{{item.title}}</p>
            <span>{{item.content}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import CountDown from "vue2-countdown";
export default {
  components: {
    CountDown
  },
  props: {
    spikeList: {
      type: Array
    },
    lang: {
      type: String
    }
  },
  watch: {
    spikeList: function(e) {
      console.log(e);
      this.tejiaData = e
    }
  },
  data() {
    return {
      // swiper配置
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        speed: 600, //config参数同swiper4,与官网一致
        // on: {
        //   click: function () {
        //     // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法 
        //     // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
        //     // const realIndex = this.realIndex;
        //     console.log(this)
        //     // vm.goDetail(realIndex);
        //   }
        // }

      },
      // 特价活动倒计时数据  左侧
      tejiaData: [
        {
          startTime:1545715707708,
          endTime:1546716149954,
          imgUrl: require("../../assets/images/10.jpg"),
          num: 1,
          startAdress: "杭州出发",
          title: "理一日游玩大理一日游玩大理一日游玩大理一日游玩大理一日",
          yPrice: 123,
          price: 70
        },
        {
          startTime:1545715707708,
          endTime:1546716149954,
          imgUrl: require("../../assets/images/10.jpg"),
          currentTime: +new Date(),
          num: 2,
          startAdress: "上虞出发",
          title: "扫地机",
          yPrice: 144,
          price: 60
        }
      ],
      // 右侧
      rightData: [
        { title: "新品推荐", content: "老君游行", price: 123 },
        { title: "王牌路线", content: "4日黄山亲子游", price: 1300 }
      ],
      // 三大侠数据   底部
      imgsData: [
        {
          url: require("../../assets/images/21.jpg"),
          title: "游侠直播间",
          content: "一起云旅行"
        },
        {
          url: require("../../assets/images/22.png"),
          title: "我要上首页",
          content: "8000元大奖"
        },
        {
          url: require("../../assets/images/23.png"),
          title: "侠魁榜",
          content: "每月最佳游记"
        }
      ]
    };
  },
  methods: {
    goDetail(item){
      this.$router.push({path:'/detail',query:{item}})
    }
  },
  mounted() {
  }
};
</script>
<style lang="less" scoped>
.strongSize {
  font-size: 20/37.5rem;
}
.teHuiLan2 {
  margin-top: 10/37.5rem;
  margin-bottom: 40/37.5rem;
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-between;
    border-radius: 10/37.5rem;
    overflow: hidden;
    li {
      width: 33%;
      height: 100/37.5rem;
      background-color: #ffefef;
      div {
        height: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15/37.5rem 10/37.5rem 0 10/37.5rem;
        p {
          font-size: 15/37.5rem;
          font-weight: 700;
          // margin-bottom: 10/37.5rem;
        }
        span {
          font-size: 12/37.5rem;
        }
      }
    }
  }
}

.teHuiLan1Second > ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 10/37.5rem;
  box-sizing: border-box;
  li {
    flex: 1;
    padding: 10/37.5rem 0;
    &:first-child {
      border-bottom: 2/37.5rem solid #fff;
    }
    .title {
      display: flex;
      align-items: center;
      span {
        &:nth-child(1) {
          color: #fff;
          font-size: 17/37.5rem;
          font-weight: 700;
          margin-right: 20/37.5rem;
        }
        &:nth-child(2) {
          width: 20/37.5rem;
          height: 20/37.5rem;
          background-color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 17/37.5rem;
          font-size: 17/37.5rem;
          color: orange;
        }
      }
    }
    .content {
      margin-top: 10/37.5rem;
      padding: 5/37.5rem;
      background-color: #fff;
      p {
        font-size: 18/37.5rem;
        color: #333;
        font-weight: 700;
      }
      span {
        font-size: 15/37.5rem;
        color: orange;
        margin-top: 6/37.5rem;
      }
    }
  }
}

.teHui {
  padding: 20/37.5rem 10/37.5rem;
  background-color: #fff;
  .teHuiLan1 {
    display: flex;
    border-radius: 10/37.5rem;
    overflow: hidden;
    & > div {
      // flex: 1;
      width: 50%;
      &:first-child {
        background-color: #ff6464;
        box-sizing: border-box;
      }
      &:last-child {
        box-sizing: border-box;
        background-color: #ffc842;
      }
    }
  }
}
.swiper-container {
  height: 100%;
  // background-color: #fff;
}
.daoJiShi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10/37.5rem 0;
  div {
    &:first-child {
      color: #fff;
      font-size: 15/37.5rem;
      font-weight: 700;
    }
  }
}
.content {
  border-radius: 5/37.5rem;
  overflow: hidden;
  box-sizing: border-box;
}
.bgcImg {
  height: 90/37.5rem;
  background-position: right bottom;
  background-size: cover;
  position: relative;
}
.num {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5/37.5rem 10/37.5rem;
  border-radius: 0 0 5/37.5rem 0;
  background: -webkit-linear-gradient(left, #fdeb51, #ffd313);
  color: #000;
  font-size: 10/37.5rem;
}
.startAdress {
  position: absolute;
  bottom: 10/37.5rem;
  left: 10/37.5rem;
  padding: 0 8/37.5rem;
  border-radius: 10/37.5rem;
  font-size: 10/37.5rem;
  background-color: #274872;
  color: #fff;
}
.des {
  height: 35/37.5rem;
  font-size: 13/37.5rem;
  color: #050505;
  padding: 10/37.5rem 10/37.5rem 0 10/37.5rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background-color: #fff;
}
.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10/37.5rem;
  box-sizing: border-box;
  background-color: #fff;
  span {
    &:first-child {
      color: #ff711f;
      font-size: 15/37.5rem;
      font-weight: 700;
    }
    &:last-child {
      color: #999999;
      font-size: 13/37.5rem;
      text-decoration: line-through;
    }
  }
}
.teHuiLan1Fisrt {
  width: 100%;
  padding: 10/37.5rem;
  box-sizing: border-box;
}
.backtimer {
  margin-right: 5/37.5rem;
  /deep/ span {
    color: red;
    font-size: 10/37.5rem;
    padding: 1/37.5rem;
    margin: 0 1/37.5rem;
  }
  /deep/ span:nth-of-type(1) {
    color: #fff;
  }
  /deep/ span:nth-of-type(2),
  /deep/ span:nth-of-type(3),
  /deep/ span:nth-of-type(4) {
    background-color: #fff;
    border-radius: 50%;
  }
}
</style>